<template>
  <div class="synopsis-content">
    <!-- 轮播图 -->
    <div>
      <swiper :options="swiperOption" ref="mySwiper" style="min-width: 1200px">
        <swiper-slide
          class="swiper-slide swiper-container-3d"
          v-for="(banner, index) in bannerList"
          :key="index"
          style="
            position: relative;
            overflow: hidden;
            width: 100%;
            height: 260px;
          "
        >
          <img
            :src="banner.img"
            style="
              position: absolute;
              top: 0;
              left: 50%;
              width: 1920px;
              height: 260px;
              margin-left: -960px;
            "
          />
        </swiper-slide>
      </swiper>
    </div>
    <div class="sy-body w1280">
      <!-- 面包屑 -->
      <div style="display: flex; align-items: center; margin: 18px">
        <img src="../../assets/home.png" alt="" />
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/Synopsis' }"
            >关于协会</el-breadcrumb-item
          >
          <el-breadcrumb-item>协会章程</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="content-body">
        <!-- 菜单栏 -->
        <div class="menu-box">
          <div class="menu-title">
            <img src="../../assets/icon.png" alt="" />
            <span>关于协会</span>
          </div>
          <div class="menu-item">
            <el-menu
              class="el-menu-vertical-demo"
              @open="handleOpen"
              @close="handleClose"
              background-color="#FFFFFF"
              text-color="#666666"
              active-text-color="#0056A2"
              router
              :default-active="this.$router.path"
            >
              <el-menu-item index="/Synopsis">
                <img
                  src="../../assets/right-none.png"
                  style="margin-right: 19px"
                  alt=""
                />
                <span slot="title">协会简介</span>
              </el-menu-item>
              <el-menu-item index="/Solution">
                <img
                  src="../../assets/right-select.png"
                  style="margin-right: 19px"
                  alt=""
                />

                <span slot="title">协会章程</span>
              </el-menu-item>
            </el-menu>
          </div>
        </div>
        <!-- 内容栏 -->
        <div class="content-box">
          <div class="content-title">协会章程</div>
          <el-divider></el-divider>
          <div>
            第一条 本协会的中文名称为：贵州省担保业协会（以
            下简称本协会）；英文名称为: Guizhou Credit Guarantee
            Association；英文缩写为:GCGA 。 第二条
            本协会是由贵州省内从事担保有关业务、行业咨询、合作交流等各企业及相关社会组织自愿组成的全省性行业性、非营利性社会团体，具有独立法人资格。
            第三条
            本协会的宗旨：高举爱国主义、社会主义旗帜，坚持走中国特色社会主义道路，遵守宪法、法律、法规和国家政策，遵守社会道德风尚，践行社会主义核心价值观。本协会为贵州省担保行业自律组织。维护会员合法权益，规范行业行为，作好会员企业与政府的桥梁与纽带；以规范、自律、交流、促进、增信为会员共同愿望，为担保机构、协作银行及企业服务，为解决中小企业融资难服务。
            第四条 本协会的登记管理机关是贵州省民政厅。本协
            会接受相关部门和登记管理机关的业务指导和监督管理。 第五条
            本协会的住所：贵州省贵阳市。
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
  
  <script>
export default {
  name: "Solution",
  data() {
    return {
      //   轮播图配置参数
      swiperOption: {
        loop: true, //是否循环轮播
        speed: 1000, //切换速度
        observer: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, //修改swiper的父元素时，自动初始化swiper
        //自动轮播
        autoplay: {
          delay: 2000,

          disableOnInteraction: false,
        },
      },
      bannerList: [
        {
          img: require("../../assets/banner1.png"),
        },
      ],
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>
  
  <style scoped>
.synopsis-content {
  background-color: rgb(246, 246, 246);
}
.sy-body {
  /* margin-top: 18px; */
}

.content-body {
  background-color: #fff;
  padding: 30px;
  display: flex;
  margin-bottom: 50px;
}

.content-body .menu-box {
  /* border: 1px solid #dcdadd; */
  flex: 1;
  border-radius: 5px;
  margin-right: 40px;
}

.content-body .content-box {
  flex: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.content-body .content-box .content-title {
  font-size: 28px;
  font-family: Microsoft YaHei;
}

.menu-title {
  background-color: #0056a2;
  color: #fff;
  font-size: 22px;
  display: flex;
  align-items: center;
  padding: 24px 12px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
.menu-title span {
  margin-left: 12px;
}

.menu-item {
  border: 1px solid #dcdadd;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}
.el-dropdown-menu__item,
.el-menu-item {
  font-size: 16px;
}
</style>